<template>
  <van-row class="card-detail-container" type="flex">
    <!-- 顶部导航栏 -->
    <van-row id="top">
      <!-- NavBar Start -->
      <van-nav-bar class="nav-bar">
        <template #left>
          <van-row
            @click="$router.back(-1)"
            class="btn-back"
            type="flex"
            justify="center"
            align="center"
          >
            <img src="@/assets/image/btn_back.png" />
          </van-row>
        </template>
      </van-nav-bar>
      <!-- NavBar End -->
    </van-row>

    <!-- 核心 -->
    <van-row id="main" type="flex" justify="center" align="center">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            :class="{ 'no-count-slide': item.count > 0 }"
            v-for="item in user.cardList"
            :key="item.id"
          >
            <!-- 卡片图片 -->
            <img
              :src="
                item.count !== 0
                  ? require('../assets/image/count_card_' + item.name + '.png')
                  : require(`../assets/image/no_count_card_${item.name}.png`)
              "
              class="main-img"
            />
          </div>
        </div>
        <!-- 邀请好友抽卡按钮 -->
        <button class="wechat-share-btn" @click="wechatShareCard">
          <img src="@/assets/image/btn_friend.png" />
        </button>
      </div>
    </van-row>

    <van-row id="footer" type="flex" justify="space-around" align="center">
      <CardItem
        :count="item.count"
        :index="index"
        :key="item.id"
        :active="detailIndex === index ? true : false"
        v-for="(item, index) in user.cardList"
        class="card-item"
        :style="{
          background:
            item.count >= 1
              ? 'url(' +
                require('../assets/image/default_card_' + item.name + '.png') +
                ') no-repeat center/ contain '
              : 'url(' +
                require('../assets/image/dark_card_' + item.name + '.png') +
                ') no-repeat center/ contain ',
        }"
        @changeActive="changeActive"
      />
    </van-row>
  </van-row>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import CardItem from "@/components/CardItem";
import "swiper/dist/js/swiper.min.js";
export default {
  name: "CardDetail",
  components: { CardItem },
  props: {},
  data() {
    return {
      mySwiper: null,
      isStartPage: true,
    };
  },
  computed: {
    ...mapGetters("activity", {
      detailIndex: "detailIndex",
      user: "user",
    }),
  },
  watch: {},
  created() {},
  mounted() {
    if (this.detailIndex === null) this.setDetailIndex(0);
    this.setSwiper();
    this.mySwiper.slideTo(this.detailIndex);
    this.isStartPage = false;
  },
  methods: {
    setSwiper() {
      this.mySwiper = new Swiper(".swiper-container", {
        slidesPerView: "auto",
        centeredSlides: true,
        watchSlidesProgress: !0,
        slidesPerView: 1.3,
        slideToClickedSlide: true,
        onProgress: function (a) {
          var b, c, d, scale, es;
          for (b = 0; b < a.slides.length; b++) {
            c = a.slides[b];
            d = c.progress;
            scale = 1 - Math.min(Math.abs(0.2 * d), 1);
            es = c.style;
            es.opacity = 1 - Math.min(Math.abs(d / 2), 1);
            es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform =
              "translate3d(0px,0," + -Math.abs(300 * d) + "px)";
          }
        },
        onSetTransition: function (a, b) {
          var es;
          for (var c = 0; c < a.slides.length; c++) {
            es = a.slides[c].style;
            es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration =
              b + "ms";
          }
        },
        onTransitionEnd: (a) => {
          if (this.isStartPage === true) return;
          this.setDetailIndex(a.activeIndex);
        },
      });
    },
    changeActive(index) {
      this.mySwiper.slideTo(index);
    },
    wechatShareCard() {
      const res = prompt("请根据右边好友列表，进行分享[q,w,e,a,s,d]");

      // 用户取消赠送操作
      if (res === null) {
        alert("取消分享操作");
        return;
      }

      // 好友不存在
      if (
        res === "q" ||
        res === "w" ||
        res === "e" ||
        res === "a" ||
        res === "s" ||
        res === "d"
      ) {
        // 好友存在
        const isSend = confirm("确定要分享给该好友吗？");
        if (isSend) {
          alert("分享成功");
        } else {
          alert("取消分享");
        }
      } else {
        alert("该好友不存在,分享失败");
      }
    },
    ...mapMutations("activity", {
      setDetailIndex: "setDetailIndex",
    }),
  },
};
</script>

<style scoped lang='less'>
.card-detail-container {
  height: 100%;
  flex-direction: column;
  background: url("~@/assets/image/bottom_cloud.png") no-repeat bottom/contain,
    url("~@/assets/image/card_detail_bg.png") no-repeat center / cover;
}

.card-detail-container #top {
  // 导航栏
  /deep/.nav-bar {
    height: 70px;
    background: transparent;
    &::after {
      content: none;
    }
    .van-nav-bar__content {
    }
    .van-nav-bar__left,
    .van-nav-bar__right {
      top: 39.86px;
    }
    // 返回按钮
    .btn-back {
      img {
        width: 12px;
        height: 20px;
      }
    }
  }
}

.card-detail-container #main {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .swiper-container {
    height: fit-content;
    display: flex;
    align-items: center;
    flex-direction: column;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
    .swiper-wrapper {
      width: 300px;
      height: 100%;
      display: flex;
      align-items: center;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
      transform-style: preserve-3d;

      .swiper-slide {
        width: 78% !important;
        position: relative;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        top: 5%;
        &.no-count-slide {
          img {
            transform: scale(1.1);
          }
        }
        // 卡片图片
        img.main-img {
          width: 100%;
          height: auto;
          display: block;
        }
      }
    }
    // 邀请按钮图片
    .wechat-share-btn {
      margin: 30px auto 0 auto;
      img {
        width: 225px;
        height: auto;
      }
    }
  }
}
.card-detail-container #footer {
  padding: 0 20px;
  width: 100%;
  height: 100px;
  .card-item {
    width: 60px;
    height: 80px;
  }
}
</style>
